import 'package:flutter/material.dart';
import 'package:loxen/widget/expandable_text.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class OrderItem extends StatefulWidget {
  OrderItem(
      {Key key,
      @required this.spec,
      @required this.code,
      this.remark,
      @required this.cover,
      @required this.name,
      this.size,
      this.biaomianjili,
      this.layer})
      : super(key: key);
  final String spec;
  final String code;
  final String remark;
  final String cover;
  final String name;
  final String size;
  final String biaomianjili;
  final String layer;

  @override
  _OrderItemState createState() => _OrderItemState();
}

class _OrderItemState extends State<OrderItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.only(left: 18),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          _renderHeader(widget.name),
          _renderContent(),
          _renderRemark(text: widget.remark)
        ],
      ),
    );
  }

  _renderHeader(text) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.only(top: 15, bottom: 15),
      decoration: BoxDecoration(
          border:
              Border(bottom: BorderSide(color: Color(0xFFEBECF1), width: 0.5))),
      child: Text(
        text,
        style: TextStyle(
            color: Color(0xFF000000),
            fontWeight: FontWeight.w500,
            fontSize: 28.sp),
      ),
    );
  }

  _renderContent() {
    return Container(
      padding: const EdgeInsets.only(top: 20, bottom: 20, right: 18.5),
      decoration: BoxDecoration(
          border:
              Border(bottom: BorderSide(color: Color(0xFFEBECF1), width: 0.5))),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(right: 10.5),
            child: Image.network(
              widget.cover,
              width: 80,
              height: 80,
              fit: BoxFit.cover,
            ),
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                _renderTitle(text: '${widget.code}', count: 1),
                Padding(
                  padding: EdgeInsets.only(top: 10.h),
                  child: Text(
                    '产品规格:  ${widget.size}',
                    style: TextStyle(fontSize: 20.sp),
                  ),
                ),
                Text('表面肌理: ${widget.biaomianjili}', style: TextStyle(fontSize: 20.sp)),
                Text('面层材料: ${widget.layer}', style: TextStyle(fontSize: 20.sp)),
//                _renderSpec(widget.spec)
              ],
            ),
          ),
        ],
      ),
    );
  }

  _renderSpec(String text) {
    return Container(
      padding: const EdgeInsets.fromLTRB(0, 0, 18.5, 0),
      margin: const EdgeInsets.only(top: 8),
      child: ExpandableText(
        unfoldWord: '查看更多',
        marginTop: 0,
        hasBorder: false,
        text: text,
        maxLines: 2,
        textStyle: TextStyle(
          color: Color(0xFF0CABCB),
          fontWeight: FontWeight.w400,
          fontSize: 12,
        ),
        style: TextStyle(
            height: 1.5,
            fontSize: 12,
            color: Color(0xFF82868E),
            fontWeight: FontWeight.w400),
      ),
    );
  }

  _renderRemark({String text}) {
    return Container(
      padding: const EdgeInsets.only(top: 20, bottom: 20, right: 18.5),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            '备注: ',
            style: TextStyle(
                color: Color(0xFF82868E),
                fontSize: 24.sp,
                fontWeight: FontWeight.w500),
          ),
          Expanded(
            child: Text(
              text != null ? text : '无',
              style: TextStyle(
                  color: Color(0xFF000000),
                  fontSize: 24.sp,
                  fontWeight: FontWeight.w500),
            ),
          )
        ],
      ),
    );
  }

  _renderTitle({String text, int count}) {
    return Row(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Expanded(
          child: _renderBoldText(text: text),
        ),
        _renderBoldText(text: 'x $count')
      ],
    );
  }

  _renderBoldText({String text}) {
    return Text(
      text,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
          color: Color(0xFF000000), fontWeight: FontWeight.w600, fontSize: 28.sp),
    );
  }
}
